<template>
  <div>
    <el-row>
      <!--<el-col :span="0">-->
        <!--<div class="filter" v-show="collapse">-->
          <!--左侧导航-->
        <!--</div>-->
      <!--</el-col>-->
      <div span="2" v-show="isShow1" ref="scrollpanel" style="height: 400px; width: 200px; margin-left:4px; clear: both; position: fixed; z-index: 999; top:11rem;">
        <Anchor>
          <AnchorLink href="#anchor1" title="1.疾病发现"/>
          <AnchorLink href="#anchor2" title="2.疾病确诊" />
          <AnchorLink href="#anchor3" title="3.初始治疗"/>
          <AnchorLink href="#anchor4" title="4.治疗方案调整"/>
          <AnchorLink href="#anchor5" title="5.疾病复发预防" />
          <AnchorLink href="#anchor6" title="6.复发后治疗" />
        </Anchor>
      </div>

      <el-col :span="20" :offset="2">
        <allcharts @newNodeEvent="parentLisen"></allcharts>
      </el-col>

      <el-col :span="1">
        <div>
          <div :class="item.toolscon" v-for="item in items">
            <ul :class="item.tools" class="tools">
              <li :class="item.class" @click="open1 = true"><span>{{item.name}}</span></li>
            </ul>
          </div>

          <Modal title="数据筛选" v-model="open1" :mask-closable="false">
            <div>
              <sidebarPatients v-show="isShow"></sidebarPatients>
            </div>
          </Modal>

        </div>
      </el-col>


    </el-row>
  </div>
</template>

<script>
  import bus from '../../bus';
  import sidebarPatients from './sideBar/SidebarPatients'
  import allcharts from '../charts/Particulars2'
  export default {
    components: {
      sidebarPatients, allcharts
    },
    data() {
      return {
        open1: false,
        collapse: true,
        isShow: true,
        isShow1: false,
        items: [
          {toolscon:'tools-con1',tools:'tools1',class:'el-icon-setting',name:'数据设置'}
        ]
      }
    },
    methods: {
      parentLisen(evtValue){
        //evtValue 是子组件传过来的值
        this.isShow1 = evtValue;
      }
    },
    created() {
      // 通过 Event Bus 进行组件间通信，来折叠侧边栏
      bus.$on('collapse', msg => {
        if (msg == true) {
          this.collapse = false;
          this.isShow = false;
          this.span5 = 0;
          this.span19 = 24
        } else {
          this.collapse = true;
          this.isShow = true;
          this.span5 = 4;
          this.span19 = 20
        }
      });
      bus.$emit('a', this.isShow1)

    }
  }
</script>

<style scoped>
  .filter {
    background-color: rgba(0, 0, 0, .48);
    box-sizing: border-box;
    flex-shrink: 0;
    padding: 55px 0 0 30px;
    margin-top: -60px;
    min-height: 800px;
  }
  .el-menu {
    background-color: rgba(0, 0, 0, .0);
  }

  .cd-stretchy-nav {
    position: fixed;
    z-index: 2;
    top: 6rem;
    right: 2px;
    font-size: 40px;
    color: #fff;
  }
  .cd-stretchy-nav .stretchy-nav-bg {
    position: absolute;
    z-index: 1;
    bottom: 0;
    right: 0;
    width: 40px;
    height: 40px;
    border-radius: 30px;
    background: rgba(255, 0, 23,.8);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
    -webkit-transition: height 0.2s, box-shadow 0.2s;
    transition: height 0.2s, box-shadow 0.2s;

  }

  span{
    color: #fff;
    padding-left: 20px;
  }
  .spn{
    display: inline-block;
    padding-bottom: 5px;
    border-bottom: 2px solid #fff;
  }

  .tools-con{
    background-color: rgba(245, 245, 248, 0.1);
    border-radius: 10px;
    padding: 20px 10px;
  }

  .tools>li{
    color: #fff;
    list-style-type:none;
    padding: 0 8px 0 0px;
    border: 2px solid #fff;
    line-height: 40px;
    border-radius: 3px;
    font-size: 36px;
  }
  /*一*/
  .tools-con1{
    position: fixed;
    z-index: 2;
    top: 6rem;
    right: -85px;
    font-size: 40px;
    color: #fff;
    cursor: pointer;
  }
  .tools1{
    margin-right: -84px;
  }
  .tools1:hover{
    width: 380px;
  }
</style>
<style>
  .ivu-anchor-link{
    padding: 40px 0 40px 5px !important;
  }
  .ivu-anchor-link-title{
    /*display: inline-block;*/
    font-size: 16px !important;
    color: #bfbfbf !important;
    font-weight: bold !important;
  }
  .ivu-anchor-ink-ball{
    border: 2px solid #2d8cf0 !important;
    background-color: #009688 !important;
    width: 0px !important;
    height: 0px !important;
  }
  .ivu-anchor-ink:before{
    background-color: #1d9586 !important;
  }

  .ivu-anchor-link-active>.ivu-anchor-link-title{
    color: #1d9586 !important;
    font-size: 24px !important;
    font-weight: bold !important;
  }
</style>
